<template>
  <div>
    <el-dialog :show-close="false" v-model="props.dialogvis" :width="props.diawidth" :style="props.diaheight"
      :close-on-click-modal="false" draggable :modal="false" overflow modal-class="dialog_class" :id="props.dioid">
      <!-- body -->
      <!-- <slot name="dialogbody"></slot> -->
      <div class="tables-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!-- <el-tab-pane name="地图设置">
            <template #label>
              <div style="font-size: 16px; font-weight: bold">地图设置</div>
            </template>
<div class="tabsetting">
  <div class="tabsetting-left">
    <el-menu :default-active="activeMenuIndex.toString()" @select="handleMenuSelect">
      <el-menu-item :index="item.id.toString()" v-for="item in [
                    { id: 0, label: '侧向线' },
                    { id: 1, label: '简标牌' },
                    { id: 2, label: '详标牌' },
                  ]" :key="item.id">{{ item.label }}
      </el-menu-item>
    </el-menu>
    <el-tree :data="treedata" :props="treeprops" :highlight-current="true" :current-node-key="currentTreeNodeKey"
      @node-click="handleTreeNodeClick" />
  </div>
  <div class="tabsetting-right">

    <div v-if="activeMenuIndex == '0' && activeComponent == 'menu'">
      <el-form :model="form" label-width="auto" label-position="right">
        <el-form-item label="线长：">
          <el-input style="width: 75px" v-model="form.name">
            <template #suffix> km </template>
          </el-input>
        </el-form-item>
        <el-form-item label="颜色：">
          <el-color-picker v-model="form.name" />
        </el-form-item>
        <el-form-item label="航迹线宽：">
          <el-input-number style="width: 80px" v-model="form.name" controls-position="right" />
        </el-form-item>
        <el-form-item label="隐消时间：">
          <el-input style="width: 75px" v-model="form.name">
            <template #suffix> s </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div v-else-if="activeMenuIndex == '1' && activeComponent == 'menu'">
      <el-form :model="form" label-width="auto" label-position="right">
        <el-form-item>
          <div style="
                          display: flex;
                          width: 100%;
                          align-items: center;
                          justify-content: space-between;
                        ">
            <el-slider style="width: 50%; margin-left: 12px" v-model="form.name">
            </el-slider>
            <el-input style="width: 75px; margin-right: 10px" v-model="form.name">
              <template #suffix> % </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <Ertitle errtitle="选中即在简标牌展示该内容" />
        </el-form-item>
        <el-form-item>
          <el-checkbox-group v-model="form.name">
            <el-checkbox style="width: 90px" v-for="item in [
                          '目标编号',
                          '目标名称',
                          '坐标',
                          '目标类别',
                          '目标类型',
                          '目标型号',
                          '地区国家',
                          '高度',
                        ]" :label="item" :value="item" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>
</el-tab-pane> -->
          <el-tab-pane name="标题设置">
            <template #label>
              <div style="font-size: 16px; font-weight: bold">标题设置</div>
            </template>
            <div class="tabsetting">
              <div class="tabsetting-left">
                <el-menu :default-active="biaoMenuIndex" @select="biaoMenuSelect">
                  <el-menu-item :index="item.id.toString()" v-for="item in [
                    { id: 0, label: '顶部标题' },
                    { id: 1, label: '右侧标题' },
                    { id: 2, label: '底部标题' },
                  ]" :key="item.id">{{ item.label }}
                  </el-menu-item>
                </el-menu>
              </div>
              <div class="tabsetting-right">
                <!--顶部标题  -->
                <div v-if="biaoMenuIndex == '0'">
                  <el-form :model="form" label-width="auto" label-position="top">
                    <el-form-item>
                      <Ertitle errtitle="更改页面顶部标题" />
                    </el-form-item>
                    <el-form-item label="标题:">
                      <el-input v-model="settfrom.TopTitle" :rows="4" show-word-limit maxlength="20" type="textarea" />
                    </el-form-item>
                  </el-form>
                </div>
                <!-- 右侧标题 -->
                <div v-else-if="biaoMenuIndex == '1'">
                  <el-form :model="form" label-width="auto" label-position="top">
                    <el-form-item>
                      <Ertitle errtitle="选中即在右侧标题展示该内容" />
                    </el-form-item>
                    <!-- 移除总开关，保留单独选项控制 -->
                    <el-form-item label="标题:">
                      <el-checkbox-group v-model="settfrom.RightTitle">
                        <el-checkbox style="width: 90px" v-for="item in [
                          '图层控制',
                          '目标属性',
                          '目标消息',
                          '战场环境',
                        ]" :label="item" :value="item" :key="item" />
                      </el-checkbox-group>
                    </el-form-item>
                  </el-form>
                </div>
                <!-- 底部标题 -->
                <div v-else-if="biaoMenuIndex == '2'">
                  <el-form :model="form" label-width="auto" label-position="top">
                    <el-form-item>
                      <Ertitle errtitle="选中即在底部展示该内容" />
                    </el-form-item>
                    <el-form-item label="标题:">

                      <el-checkbox-group v-model="settfrom.BottomTitle">
                        <el-checkbox style="width: 95px" v-for="item in [
                          '目标标绘',
                          '气象数据',
                          '兵力部署热力图',
                          '插件配置',
                        ]" :label="item" :value="item" :key="item" />
                      </el-checkbox-group>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <Close class="close-btn" width="16px" height="16px" style="cursor: pointer" @click="handleClose('关闭')" />
      </div>
      <div class="footerbtn">
        <el-button style="width: 60px; margin-top: 20px" @click="handleClose('关闭')">取消</el-button>
        <el-button style="
            width: 60px;
            margin-top: 20px;
            background: #3370ff;
            color: #fff;
          " @click="shecli">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  defineProps,
  defineEmits,
  nextTick,
  onMounted,
  getCurrentInstance,
  onUnmounted,
  onBeforeUnmount
} from "vue";
import { useTitleStore } from "@/stores/TitleStore";
import { getAssetsFile } from "@/utils/compnt.js";
import Ertitle from "./ertitle.vue";
const { proxy } = getCurrentInstance();
const props = defineProps([
  "dialogvis",
  "diawidth",
  "diatitle",
  "diaheight",
  "dioid",
]);
const emits = defineEmits(["issheclose", "isshecli"]);

import { getSetting, putSetting } from '@/api'

const titleStore = useTitleStore();

// 初始化 settfrom 数据
const settfrom = ref({
  TopTitle: titleStore.topTitle,
  RightTitle: [...titleStore.rightTitles],
  BottomTitle: [...titleStore.bottomTitles]
});

const treedata = ref([
  {
    label: "图层控制",
    children: [
      {
        label: "XX属性",
      },
      {
        label: "目标类别",
      },
      {
        label: "目标类型",
        children: [
          {
            label: "未知",
          },
          {
            label: "XX平台",
          },
          {
            label: "设施",
          },
          {
            label: "非上述项",
          },
          {
            label: "非上述",
          },
        ],
      },
    ],
  },
]);

const treeprops = ref({
  children: "children",
  label: "label",
});

const form = ref({
  name: null,
});



const activeMenuIndex = ref('0'); // 默认高亮第一个菜单项
const currentTreeNodeKey = ref(null); // 当前高亮的树节点
const activeComponent = ref("menu"); // 记录当前高亮的组件（'menu' 或 'tree'）

const handleMenuSelect = (index) => {
  activeMenuIndex.value = index;
  currentTreeNodeKey.value = null; // 清除树的高亮
  activeComponent.value = "menu"; // 标记菜单被选中
};
const handleTreeNodeClick = (data, node) => {
  currentTreeNodeKey.value = node.label; // 设置树高亮
  activeMenuIndex.value = ""; // 清除菜单高亮
  activeComponent.value = "tree"; // 标记树被选中
};

const activeName = ref("标题设置");

const handleClick = (tab, event) => {
  if (tab.props.name == "地图设置") {
    biaoMenuIndex.value = '0';
  } else {
    activeMenuIndex.value = '0';
    currentTreeNodeKey.value = null;
    activeComponent.value = "menu";
  }
};

const handleClose = (data) => {
  emits("issheclose", data);
  // emits('update:dialogvis', false)
};

//
const biaoMenuIndex = ref('0'); // 默认高亮第一个菜单项
const biaoMenuSelect = (index) => {
  biaoMenuIndex.value = index;
};

//
const getSettingapi = async () => {
  const { data } = await getSetting()
  settfrom.value.TopTitle = data.TopTitle
  settfrom.value.RightTitle = data.RightTitle
  settfrom.value.BottomTitle = data.BottomTitle
}

onMounted(() => {
  // 初始化 settfrom 数据

  settfrom.value.TopTitle = titleStore.topTitle;
  settfrom.value.RightTitle = [...titleStore.rightTitles];
  settfrom.value.BottomTitle = [...titleStore.bottomTitles];
});

const sheclose = () => {
  emits("beforeClose");
};

const shecli = async () => {
  // 更新标题数据到 store
  if (biaoMenuIndex.value == '0' && activeName.value == "标题设置") {
    titleStore.setTopTitle(settfrom.value.TopTitle);
  } else if (biaoMenuIndex.value == '1' && activeName.value == "标题设置") {
    titleStore.setRightTitles([...settfrom.value.RightTitle]);
  } else if (biaoMenuIndex.value == '2' && activeName.value == "标题设置") {
    titleStore.setBottomTitles([...settfrom.value.BottomTitle]);
  }

  // 同时更新到服务器
  await titleStore.updateTitles();


  // 可以在这里添加一个事件，通知其他组件标题设置已更新
  // proxy.$mitt.emit('titleSettingsUpdated');

  emits("isshecli");
};


onBeforeUnmount(() => {
  // 清理操作
})

</script>

<style scoped>
.tables-container {
  position: relative;
}

.close-btn {
  position: absolute;
  top: 19px;
  right: 19px;
}

.tabsetting {
  height: 265px;
  display: flex;
  overflow: hidden;
  /* background: red; */
}

.tabsetting-left {
  width: 175px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #e8e8e8;
  padding-top: 12px;
}

:deep(.tabsetting-right .el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #007dff;
  border-color: #007dff;
}

:deep(.tabsetting-right .el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #0074eb;
}

:deep(.tabsetting-right .el-slider__input) {
  width: 70px;
}

:deep(.tabsetting-right .el-input__wrapper) {
  border-radius: 6px;
}

:deep(.tabsetting-right .el-input-number__increase) {
  background: none;
  color: black;
}

:deep(.tabsetting-right .el-input-number__decrease) {
  background: none;
  color: black;
}

:deep(.tabsetting-right .el-input__wrapper) {
  background: none;
}

:deep(.tabsetting-left .el-menu) {
  border: none;
}

:deep(.tabsetting-left .el-tree-node__content) {
  margin: 0;
  padding: 0;
}

:deep(.tabsetting-left .el-text) {
  color: #262626;
}

:deep(.tabsetting-left .el-tree-node.is-current > .el-tree-node__content) {
  width: 155px;
  background-color: #ebf3ff !important;
  border-radius: 4px;
}

:deep(.tabsetting-left .el-tree-node__content:hover) {
  padding-left: 0px;
  width: 155px;
  height: 36px;
  background: #f5f5f5;
}

.tabsetting-right {
  padding-top: 20px;
  height: 100%;
  overflow-x: hidden;
  margin-left: 20px;
  width: calc(100% - 200px);
  padding-right: 20px;
}

.footerbtn {
  height: 72px;
  border-top: 1px solid rgba(232, 232, 232, 1);
  display: flex;
  justify-content: flex-end;
}

:deep(.el-dialog) {
  pointer-events: auto;
}

/* :deep(.el-dialog__header) {
  display: none;
} */

:deep(.el-tabs__header) {
  height: 48px;
  margin: 0;
}

:deep(.el-tabs__nav-scroll) {
  height: 48px;
}

:deep(.el-tabs__nav) {
  height: 48px;
}

:deep(.el-tabs__item:hover) {
  color: #3370ff !important;
}

:deep(.tabsetting-left .is-active) {
  color: #3370ff;
}

:deep(.el-tabs__active-bar) {
  background: #3370ff;
}

:deep(.el-menu-item) {
  height: 36px;
  padding-right: 0;
  width: 155px;
  border-radius: 4px;
}

:deep(.el-menu-item:hover) {
  background: #f5f5f5;
  /* color: #3370FF; */
}

:deep(.tabsetting-left .el-menu-item.is-active) {
  background: #ebf3ff;
  color: #3370ff;
}
</style>